<template>
  <view class="personal-info">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="page-content">
      <!-- 修改手机号弹窗 -->
      <phone-edit-popup
        :show="showPhoneEdit"
        :currentPhone="userInfo.phone"
        @close="showPhoneEdit = false"
        @success="onPhoneUpdateSuccess"
      />

      <!-- 修改昵称弹窗 -->
      <nickname-edit-popup
        :show="showNicknameEdit"
        :currentNickname="userInfo.name"
        @close="showNicknameEdit = false"
        @success="onNicknameUpdateSuccess"
      />
      <!-- 个人信息卡片 -->
      <view class="info-card">
        <!-- 头像区域 -->
        <view class="avatar-section">
          <u-upload
            :fileList="avatarList"
            @afterRead="afterRead"
            @delete="deleteAvatar"
            :maxCount="1"
            :previewFullImage="true"
            width="120"
            height="120"
          >
            <view class="avatar-upload">
              <u-image
                v-if="avatarUrl"
                :src="avatarUrl"
                class="avatar"
                width="160rpx"
                height="160rpx"
                shape="circle"
                mode="aspectFill"
              ></u-image>
              <view v-else class="avatar-placeholder">
                <text class="avatar-text">点击上传</text>
              </view>
            </view>
          </u-upload>
        </view>

        <!-- 基本信息 -->
        <view class="basic-info">
          <view class="info-item" @click="editInfo('name')">
            <text class="label">姓名</text>
            <view class="value-with-arrow">
              <text class="value">{{ userInfo.name }}</text>
              <i class="iconfont icon-jiantou font28"></i>
            </view>
          </view>
          <view class="info-item">
            <text class="label">性别</text>
            <text class="value">{{ userInfo.gender }}</text>
          </view>
          <view class="info-item" @click="editInfo('phone')">
            <text class="label">手机号码</text>
            <view class="value-with-arrow">
              <text class="value">{{ userInfo.phone }}</text>
              <i class="iconfont icon-jiantou font28"></i>
            </view>
          </view>
          <view class="info-item">
            <text class="label">接单社区</text>
            <text class="value">{{ userInfo.community }}</text>
          </view>
          <view class="info-item">
            <text class="label">服务类别</text>
            <text class="value">{{ userInfo.serviceType }}</text>
          </view>
          <view class="info-item" @click="editInfo('certification')">
            <text class="label">实名认证</text>
            <view class="value-with-arrow">
              <text class="value certified">{{ userInfo.certification }}</text>
              <i class="iconfont icon-jiantou font28"></i>
            </view>
          </view>
          <view class="info-item">
            <text class="label">所在地</text>
            <text class="value address">{{ userInfo.address }}</text>
          </view>
        </view>
      </view>

      <!-- 个人简介卡片 -->
      <view class="info-card">
        <view class="section">
          <view class="section-title"
            ><image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image
            >个人简介</view
          >
          <view class="section-content">
            <text class="intro-text">{{ userInfo.introduction }}</text>
          </view>
        </view>
      </view>

      <!-- 技能证书卡片 -->
      <view class="info-card">
        <view class="section">
          <view class="section-title"
            ><image
              :src="IMAGE_URL+'/static/master/title-icon.png'"
              class="title-icon"
            ></image
            >技能证书</view
          >
          <view class="certificates">
            <view
              class="certificate-item"
              v-for="(cert, index) in certificates"
              :key="index"
            >
              <u-image
                :src="cert.image"
                class="certificate-image"
                mode="aspectFill"
                width="140rpx"
                height="160rpx"
                @click="previewCertificate(cert.image)"
              ></u-image>
              <!-- <text class="certificate-text">{{ cert.name }}</text> -->
            </view>
            <!-- <view class="add-certificate" @click="addCertificate">
              <text class="add-icon">+</text>
              <text class="add-text">添加证书</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import NicknameEditPopup from "./components/nickname-edit-popup.vue";
import PhoneEditPopup from "./components/phone-edit-popup.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      showPhoneEdit: false,
      showNicknameEdit: false,
      title: "个人信息",
      avatarUrl: "/static/images/avatar.jpg",
      avatarList: [],
      userInfo: {
        name: "张三",
        gender: "男",
        phone: "13251215417",
        community: "华望城悦华园二区",
        serviceType: "家居装修、软装维修",
        certification: "已实名",
        address: "华望城悦华园二区34号楼4-204",
        introduction:
          "我是李明，一名资深新媒体运营。擅长内容策划与用户增长,精通微信、抖音等平台运营逻辑。曾主导多个账号从0到1，实现粉丝量超50万，爆款内容多次登上热门榜单。始终以创新思维和高效执行力，为品牌创造价值。",
      },
      certificates: [
        { image: "/static/images/cert1.jpg", name: "电工证" },
        { image: "/static/images/cert2.jpg", name: "维修资格证" },
        { image: "/static/images/cert3.jpg", name: "安全证书" },
      ],
    };
  },
  components: {
    headerVue,
    NicknameEditPopup,
    PhoneEditPopup,
  },
  methods: {
    // 头像上传后处理
    afterRead(event) {
      const { file } = event;
      // 这里模拟上传成功，实际项目中需要调用上传接口
      this.avatarUrl = file.url;
      uni.showToast({
        title: "头像上传成功",
        icon: "success",
      });
    },

    // 删除头像
    deleteAvatar(event) {
      const { index } = event;
      this.avatarList.splice(index, 1);
      this.avatarUrl = "";
    },

    // 编辑信息
    editInfo(type) {
      if (type === "phone") {
        this.showPhoneEdit = true;
      } else if (type === "name") {
        this.showNicknameEdit = true;
      } else {
        // 其他编辑逻辑...
      }
    },

    // 手机号更新成功
    onPhoneUpdateSuccess(newPhone) {
      this.userInfo.phone = newPhone;
    },

    // 昵称更新成功
    onNicknameUpdateSuccess(newNickname) {
      this.userInfo.name = newNickname;
    },

    // 预览证书
    previewCertificate(imageUrl) {
      uni.previewImage({
        urls: this.certificates.map((cert) => cert.image),
        current: imageUrl,
      });
    },

    // 添加证书
    addCertificate() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.certificates.push({
            image: tempFilePaths[0],
            name: "新证书",
          });
          uni.showToast({
            title: "证书添加成功",
            icon: "success",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personal-info {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;
  .title-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
  .page-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 32rpx;
  }

  .info-card {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 28rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
    ::v-deep {
      .u-upload {
        flex: 0;
      }
    }
  }

  .avatar-upload {
    position: relative;
  }

  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: 4rpx solid #f8f9fa;
  }

  .avatar-placeholder {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: 2rpx dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-text {
    font-size: 24rpx;
    color: #999;
  }

  .basic-info {
    margin-bottom: 0;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    // 可点击的项添加点击效果
    &:active {
      background-color: #f8f9fa;
      border-radius: 8rpx;
    }
  }

  .label {
    font-size: 28rpx;
    color: #666666;
    font-weight: 400;
    min-width: 140rpx;
  }

  .value {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    text-align: right;
    flex: 1;
    margin-right: 10rpx;

    &.certified {
      color: #52c41a;
    }

    &.address {
      line-height: 1.4;
    }
  }

  .value-with-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }

  .arrow {
    font-size: 36rpx;
    color: #ccc;
    margin-left: 10rpx;
    font-weight: 300;
  }

  .section {
    margin-bottom: 0;
  }

  .section-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;
  }

  .section-content {
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 24rpx;
  }

  .intro-text {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
    text-align: justify;
  }

  .certificates {
    display: flex;
    gap: 20rpx;
    flex-wrap: wrap;
  }

  .certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .certificate-image {
    width: 140rpx;
    height: 160rpx;
    border-radius: 8rpx;
    background-color: #f0f0f0;
    margin-bottom: 10rpx;
  }

  .certificate-text {
    font-size: 22rpx;
    color: #999999;
    font-weight: 500;
  }

  .add-certificate {
    width: 140rpx;
    height: 160rpx;
    border: 2rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;

    &:active {
      background-color: #f0f0f0;
    }
  }

  .add-icon {
    font-size: 36rpx;
    color: #999;
    margin-bottom: 10rpx;
  }

  .add-text {
    font-size: 22rpx;
    color: #999;
  }
}
</style>
